<template>
  <div class="container">
    <!-- 预约记录 -->
    <div class="record-list" v-if="recordList.length > 0">
      <div class="record-item" v-for="(item, index) in recordList" :key="index">
        <div class="record-item-title">
          <text class="record-item-title-text">{{ item.name }}</text>
          <text class="record-item-title-text">{{ item.sex }}</text>
          <text class="record-item-title-text">{{ item.age }}</text>
        </div>
      </div>
    </div>
    <div class="record-list-null" v-else>
      <img src="../../../static/img/my/record.png" alt="" />
      <div class="record-item-title-text">还没有提交申请</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myApp",
  data() {
    return {
      title: "Hello",
      recordList: [
        // {
        //   name: "张三",
        //   sex: "男",
        //   age: "18",
        //   phone: "123456789",
        //   address: "河南郑州",
        // },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 0;
  margin: 0;
  background-color: rgb(247, 247, 247);
  height: 100vh;
  width: 100%;
  // border: 1px solid red;
}

.record-list-null {
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  img {
    height: 100%;
    width: 100%;
  }
  .record-item-title-text {
    // border: 1px solid red;
    width: fit-content;
    font-size: 14px;
  }
}
</style>